<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
	    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
		form,fieldset,input,textarea,p,blockquote,th,td,img { padding: 0; margin: 0; }
		fieldset,img { border: 0; }
		address,caption,cite,code,dfn,em,th,var,i { font-weight:normal; font-style:normal; }
		ol,ul,li { list-style: none; }
		div,dl,dt,dd,ol,ul,li{ zoom:1; }
		caption,th { text-align: left; }
		h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size:100%; }
		q:before,q:after { content:''; }
		abbr,acronym { border: 0; }
		
    	/* 焦点图 */
		.focusBox { float:left; position: relative; width: 320px; height: 240px; margin-bottom:10px;  overflow: hidden; font-family:Arial; text-align: left; background:#fff; }
		.focusBox .pic img { width: 320px; height: 240px; display: block; }
		.focusBox .txt-bg { position: absolute; bottom: 0; z-index: 1; height: 36px; width:100%;  background: #333; filter: alpha(opacity=40); opacity: 0.4; overflow: hidden; }
		.focusBox .txt { position: absolute; bottom: 0; z-index: 2; height: 36px; width:100%; overflow: hidden; }
		.focusBox .txt li{ height:36px; line-height:36px; position:absolute; bottom:-36px;}
		.focusBox .txt li a{ display: block; color: white; padding: 0 0 0 10px; font-size: 12px; font-weight: bold; text-decoration: none; }
		.focusBox .num { position: absolute; z-index: 3; bottom: 8px; right: 8px; }
		.focusBox .num li{ float: left; position: relative; width: 18px; height: 15px; line-height: 15px; overflow: hidden; text-align: center; margin-right: 1px; cursor: pointer; }
		.focusBox .num li a,.focusBox .num li span { position: absolute; z-index: 2; display: block; color: white; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; }
		.focusBox .num li span { z-index: 1; background: black; filter: alpha(opacity=50); opacity: 0.5; }
		.focusBox .num li.on a,.focusBox .num a:hover{ background:#f60;}
    </style>
</head>

<body>
    <div class="focusBox">
        <ul class="pic">
            <li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/1.jpg"></a></li>
            <li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/2.jpg"></a></li>
            <li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/3.jpg"></a></li>
            <li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/4.jpg"></a></li>
        </ul>
        <div class="txt-bg"></div>
        <div class="txt">
            <ul>
                <li><a href="#">SuperSlide美女福利图Quiet</a></li>
                <li><a href="#">SuperSlide美女福利图DoubleLi</a></li>
                <li><a href="#">SuperSlide美女福利图爱的练习曲</a></li>
                <li><a href="#">SuperSlide美女福利图夜莺</a></li>
            </ul>
        </div>
        <ul class="num">
            <li class="on"><a>1</a><span></span></li>
            <li class=""><a>2</a><span></span></li>
            <li class=""><a>3</a><span></span></li>
            <li class=""><a>4</a><span></span></li>
        </ul>
    </div>
    <script type="text/javascript" src="./jquery1.42.min.js"></script>
    <script type="text/javascript" src="./jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript">
    	jQuery(".focusBox").slide({ titCell:".num li", mainCell:".pic",effect:"fold", autoPlay:true,trigger:"click",	
			//下面startFun代码用于控制文字上下切换
			startFun:function(i){		 
			jQuery(".focusBox .txt li").eq(i).animate({"bottom":0}).siblings().animate({"bottom":-36});	
		}});
    </script>
</body>

</html>